<template>
	<div class="wrap">
        <div class="section1">
          <img src="img/bigScreen/14.png" alt="" @click="home('/')"/>
        </div>
        <div class="section2">
        	<div class="system" :class="[item.activeClass]" v-for="(item,index) in leftSystem" 
        		:key="index" @click="home(item.URL)">
        		<span >{{item.name}}</span>
        	</div>
        </div>
        <div class="section3">

        </div>
        <div class="section4">
        	<div class="system" :class="[item.activeClass]" v-for="(item,index) in rightSystem" :key="index"  @click="home(item.URL)">
        		<span >{{item.name}}</span>
        	</div>
        </div>
        <div class="section5">
        	<div style="font-size: 24px;">{{timeArr[0]}}</div>
        	<div style="font-size: 14px;">{{timeArr[1]}}</div>
        </div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
               leftSystem:[	               
	               {name:'首页', URL:'/bigScreen_true',activeClass:[]},
	               {name:'水专题', URL:'/bigScreen_water',activeClass:[]}
               ],
               rightSystem:[
	               {name:'气专题', URL:'/bigScreen_gas',activeClass:[]},
	               {name:'安全专题', URL:'/bigScreen_salf',activeClass:[]},
               ],
               timer:null,
               timeArr:[]
               
			}
		},
		mounted() {
		  this.initHeader()	
          this.init()
          let that=this
          this.timer=setInterval(function(){
          	that.init()
          },1000)
		},
	    beforeDestroy() {
	       clearInterval(this.timer)
	    },			
		methods: {
		  home(url){
		  	if(url=="/bigScreen_salf"){
		  		return false
		  	}
		  	this.$router.push({
		  		path:url
		  	})
		  },
          initHeader(){
			  let path=this.$router.history.current.path
			  /*system3 非当前页添加  system2 非当前页添加  system1 当前页添加*/
			  if(path=='/bigScreen_true'){			  	
			  	for(var i=0;i<this.leftSystem.length;i++){
			  		if(path==this.leftSystem[i].URL){
			  			this.leftSystem[i].activeClass.push('system1')
			  		}else{
			  			this.leftSystem[i].activeClass.push('system2','system3')
			  		}			  		
			  	}
			  	for(var i=0;i<this.rightSystem.length;i++){
			  		this.rightSystem[i].activeClass.push('system2','system3')
			  	}		  	
			  }else if(path=='/bigScreen_water'){
			  	for(var i=0;i<this.leftSystem.length;i++){
                    this.leftSystem[i].activeClass.push('system2','system3')		  		
			  	}
			  	for(var i=0;i<this.rightSystem.length;i++){
			  		if(path==this.rightSystem[i].URL){
			  			this.rightSystem[i].activeClass.push('system1')
			  		}else{
			  			this.rightSystem[i].activeClass.push('system2','system3')
			  		}	
			  	}				  	
			  }else if(path=='/bigScreen_gas'){
			  	for(var i=0;i<this.leftSystem.length;i++){
                    this.leftSystem[i].activeClass.push('system2','system3')		  		
			  	}	  	
			  	for(var i=0;i<this.rightSystem.length;i++){
			  		if(path==this.rightSystem[i].URL){
			  			this.rightSystem[i].activeClass.push('system1')
			  		}else{
			  			this.rightSystem[i].activeClass.push('system2','system3')
			  		}	
			  	}		  	
			  }
			  
          },
		  link(url){
		  	window.location.href=url
		  },
		  checkTime(i){   
			if (i<10){
				i="0" + i;
			}   
			return i;
		  }, 
          init(){
          	this.timeArr=[]
			var today=new Date();//定义日期对象   
			var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年    
			var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年    
			var dd = today.getDate();//通过日期对象的getDate()方法返回年     
			var hh=today.getHours();//通过日期对象的getHours方法返回小时   
			var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟   
			var ss=today.getSeconds();//通过日期对象的getSeconds方法返回秒   
			// 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09   
			MM=this.checkTime(MM);
			dd=this.checkTime(dd);
			mm=this.checkTime(mm);   
			ss=this.checkTime(ss);    
			var day; //用于保存星期（getDay()方法得到星期编号）
			if(today.getDay()==0)   day   =   "星期日 " 
			if(today.getDay()==1)   day   =   "星期一 " 
			if(today.getDay()==2)   day   =   "星期二 " 
			if(today.getDay()==3)   day   =   "星期三 " 
			if(today.getDay()==4)   day   =   "星期四 " 
			if(today.getDay()==5)   day   =   "星期五 " 
			if(today.getDay()==6)   day   =   "星期六 " 
			this.timeArr.push(hh+":"+mm+":"+ss)
			this.timeArr.push(yyyy+"-"+MM+"-"+dd)
			// this.timer=yyyy+"-"+MM +"-"+ dd +" "+ day +" "+hh+":"+mm+":"+ss         	    
          }
		}
	}
</script>
<style lang="scss" scoped>
    *{box-sizing: border-box;}
    .wrap{width: 100%;height: 100%;display: flex;justify-content: space-between;position: relative;
        background: url(/img/bigScreen/62.png)no-repeat;
        background-size: 100% 100%;
        color: #F3FFFF;      
    }
    .section1{width: 8%;padding:0 25px;display: flex;align-items: center;justify-content: center;
      img{width: 100%;}
    }
    .section2{width: 21%;display: flex;align-items: center;justify-content: flex-end;
      .system{width: 205px;height: 65px;cursor: pointer;
      background-size: cover;display: flex;align-items: center;justify-content: center;
        span{font-size: 20px;}
      }
      /*system3 非当前页添加  system2 非当前页添加  system1 当前页添加*/
      .system3:hover{background: url(/img/bigScreen/35.png)no-repeat;background-size: cover;}
      .system1{background: url(/img/bigScreen/35.png)no-repeat;}
      .system2{background: url(/img/bigScreen/47.png)no-repeat;}      
    }
    
    .section3{width: 42%;display: flex;align-items: center;justify-content: center;
       img{width: 100%;}
    }
    .section4{width: 21%;display: flex;align-items: center;justify-content: center;
      .system{width: 205px;height: 65px;cursor: pointer;
      background-size:cover;display: flex;align-items: center;justify-content: center;
        span{font-size: 20px;}
      }
      .system1{background: url(/img/bigScreen/46.png)no-repeat;}
      .system2{background: url(/img/bigScreen/34.png)no-repeat;}     
      .system3:hover{background: url(/img/bigScreen/46.png)no-repeat;background-size: cover;}    
    }
    .section5{width: 8%;display: flex;align-items: center;justify-content: center;flex-direction: column;}
</style>